import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Button, Row, Form, Input } from 'antd';
import styles from './Login.css';

const FormItem = Form.Item;

const Login = ({ dispatch, form: { getFieldDecorator, validateFieldsAndScroll } }) => {
    function handleOk () {
        validateFieldsAndScroll((errors, values) => {
            if (errors) {
                return
            } else {
                dispatch({ type: 'login/login', payload: { values } })
            }
        })
    }
    return (
        <div className={styles.form}>
            <div className={styles.logo}>
                <span>登录</span>
            </div>
            <form>
                <FormItem hasFeedback>
                    {getFieldDecorator('username', {
                        rules: [{required: true}],
                    })(
                        <Input onPressEnter={handleOk} placeholder="Username" />
                    )}
                </FormItem>
                <FormItem hasFeedback>
                    {getFieldDecorator('password', {
                        rules: [{required: true}],
                    })(
                        <Input type="password" onPressEnter={handleOk} placeholder="Password" />
                    )}
                </FormItem>
                <Row>
                    <Button type="primary" onClick={handleOk}>
                        Sign in
                    </Button>
                    <p>
                        <span>Username：WHSJ</span>
                        <span>Password：WHSJ</span>
                    </p>
                </Row>

            </form>
        </div>
    )
};

Login.propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect()(Form.create()(Login))
